<script lang="ts" setup>
import { ref, onMounted, computed, reactive } from 'vue';
import { AlertOutlined } from '@ant-design/icons-vue';
import { getSalarysSettingsApi, postSalarysSettingsApi } from '@/common/apis/wages'
import { message } from 'ant-design-vue';

const activeKey = ref('1');
// 间距
const size = ref(5)
// 企业计薪及津贴数据
const formState = ref();

const subsidies = computed(() => [
    { id: 1, name: '交通补贴', subsidy: formState.value?.transportationSubsidyAmount, calculationType: formState.value?.transportationSubsidyScheme, reminder: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；', },
    { id: 2, name: '通讯补贴', subsidy: formState.value?.communicationSubsidyAmount, calculationType: formState.value?.communicationSubsidyScheme, reminder: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；', },
    { id: 3, name: '午餐补贴', subsidy: formState.value?.lunchAllowanceAmount, calculationType: formState.value?.lunchAllowanceScheme, reminder: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；', },
    { id: 4, name: '住房补贴', subsidy: formState.value?.housingSubsidyAmount, calculationType: formState.value?.housingSubsidyScheme, reminder: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；', },
])

// 获取企业计薪及津贴数据
const getSalarysSettingsData = async () => {
    const res = await getSalarysSettingsApi()
    formState.value = res.data.data
    console.log(formState.value)
}

// 提交 
const onSubmit = async () => {
    // 保存更改的信息
    const res = await postSalarysSettingsApi(formState.value)
    console.log(res, '保存更改的信息')
    message.success('修改成功')
}

// 重置信息
const onReset = async () => {
    await getSalarysSettingsData()
    message.success('重置信息')
}

onMounted(() => {
    getSalarysSettingsData()
})
</script>

<template>
    <div class="subsidy">
        <a-tabs v-model:activeKey="activeKey" v-if="formState">
            <a-tab-pane key="1" tab="计薪设置">
                <a-form-item label="对应社保自然月">
                    <a-select class="subsidy-width" placeholder="对应社保自然月" v-model:value="formState.socialSecurityType">
                        <a-select-option value="shanghai">次月</a-select-option>
                        <a-select-option value="beijing">当月</a-select-option>
                    </a-select>
                    <!-- 文字提示 -->
                    <a-tooltip>
                        <template #title>
                            如果201606月工资中扣除2016年6月自然月的社保公积金，请选择当月；如果扣除2016年7月自然月的社保公积金，请选择次月。
                        </template>
                        <AlertOutlined />
                    </a-tooltip>
                </a-form-item>
                <a-form-item label="社保数据来源">
                    <a-input class="subsidy-width" :disabled="true" placeholder="社保模块" />
                    <!-- 文字提示 -->
                    <a-tooltip>
                        <template #title>
                            计算工资时的五险一金金额将取自社保报表
                        </template>
                        <AlertOutlined />
                    </a-tooltip>
                </a-form-item>
                <a-form-item label="考勤数据来源">
                    <a-input class="subsidy-width" :disabled="true" placeholder="考勤模块" />
                    <!-- 文字提示 -->
                    <a-tooltip>
                        <template #title>
                            计算工资时的考勤数据将取自考勤统计表
                        </template>
                        <AlertOutlined />
                    </a-tooltip>
                </a-form-item>
            </a-tab-pane>
            <a-tab-pane key="2" tab="津贴设置" force-render>
                <!-- 通用方案 -->
                <a-form-item label="通用方案">
                    <a-input class="subsidy-width" v-model:value="formState.subsidyName" />
                </a-form-item>
                <!-- 备注 -->
                <a-form-item label="备注">
                    <a-input class="subsidy-width" v-model:value="formState.subsidyRemark" />
                </a-form-item>
                <!-- 津贴 -->
                <a-form-item label="津贴名称">
                    <div v-for="item in subsidies" :key="item.id">
                        <a-space :size="size">
                            <!-- 交通补贴 通讯补贴 午餐补贴 住房补贴 -->
                            <a-input class="subsidy-width" :disabled="true" :placeholder="item.name" />
                            <a-select class="subsidy-width" placeholder="对应社保自然月" v-model:value="item.calculationType">
                                <a-select-option>每日出勤</a-select-option>
                                <a-select-option>每日固定</a-select-option>
                            </a-select>
                            <!-- 文字提示 -->
                            <a-tooltip>
                                <template #title>
                                    {{ item.reminder }}
                                </template>
                                <AlertOutlined />
                            </a-tooltip>
                            <a-input class="subsidy-width" v-model:value="item.subsidy" />
                        </a-space>
                    </div>
                </a-form-item>
            </a-tab-pane>
        </a-tabs>
        <!-- 提交按钮 -->
        <div>
            <a-button type="primary" @click="onSubmit">提交</a-button>
            <a-button class="subsidy-button" @click="onReset">重置</a-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.subsidy {
    background-color: white;
    padding: 10px;

    &-width {
        width: 250px;
    }

    &-button {
        margin-left: 10px;
    }
}
</style>